<template>
  <div class="lcds-root-container">
    <div class="lc-list-view2" style="--form-input-width: 100%">
      <el-collapse-transition>
        <ListFilter v-show="filterVisible" ref="filterRef" @search="handleSearchListView" />
      </el-collapse-transition>
      <div class="lc-list-view2-body">
        <lc-block :columns="2">
          <div
            class="lc-buttonGroup lc-buttonGroup__level lc-buttonGroup__center lc-list-view__toolbar"
            style="align-items: center; justify-content: flex-start; flex-basis: 100%"
          >
            <el-button class="lc-button" type="primary" @click="undefined">
              <lc-svg-icon class="lc-svg-icon" icon-class="materials_plus"></lc-svg-icon>

              新增
            </el-button>
            <el-button class="lc-button" type="primary" @click="undefined">
              <lc-svg-icon class="lc-svg-icon" icon-class="btn_edit_icon"></lc-svg-icon>

              修改
            </el-button>
            <el-button
              class="lc-button"
              @click="handleClickDeleteItemOfListView(tableSingleSelection)"
            >
              <lc-svg-icon class="lc-svg-icon" icon-class="btn_delete_icon"></lc-svg-icon>

              删除
            </el-button>
            <el-button class="lc-button" type="primary" @click="undefined">
              <lc-svg-icon class="lc-svg-icon" icon-class="materials_rower"></lc-svg-icon>

              明细
            </el-button>
            <el-button class="lc-button" type="primary">
              <lc-svg-icon class="lc-svg-icon" icon-class="materials_timeline"></lc-svg-icon>

              交易历程
            </el-button>
          </div>

          <lc-rower
            class="lc-list-view__toolbar-tools"
            style="justify-content: flex-end; --width: 200px"
          >
            <el-tooltip content="刷新">
              <el-button class="lc-button" :circle="true" @click="resetListView">
                <lc-svg-icon class="lc-svg-icon" icon-class="reset"></lc-svg-icon>
              </el-button> </el-tooltip
            ><el-tooltip content="搜索">
              <el-button class="lc-button" :circle="true" @click="handleToggleFilterOfListView">
                <lc-svg-icon class="lc-svg-icon" icon-class="search"></lc-svg-icon>
              </el-button>
            </el-tooltip>
          </lc-rower>
        </lc-block>

        <el-table
          ref="tableRef"
          class="lc-table"
          :data="tableData"
          :row-key="tableRowKey"
          :highlight-current-row="true"
          header-cell-class-name="hide-select-all"
          @row-click="handleTableRowClick"
          @selection-change="handleTableSelectionChange"
          @select="handleTableSingleSelect"
          :border="true"
        >
          <el-table-column type="selection"></el-table-column>

          <template v-for="(col, index) in tableColumns">
            <el-table-column
              v-if="col.showFlag"
              :key="col.prop + '_' + index"
              :prop="col.prop"
              :label="col.label"
              v-bind="col.attrs"
            >
            </el-table-column>
          </template>
        </el-table>

        <lc-pagination
          ref="pagerRef"
          :background="true"
          @current-change="handleCurrentPageChange"
          @size-change="handlePageSizeChange"
        ></lc-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, unref } from 'vue';

import ListFilter from './components/listFilter/index.vue';
import { request } from '@/apis/request';
import useListView from '@hooks/uwdp/list-view';
import { isEmpty, isUndefined } from 'lodash';
import { ElMessage } from 'element-plus';
defineOptions({
  name: 'ListViewPage2'
});

const tableRef = ref(null);
const tableData = ref([]);
const tableColumns = ref([
  { label: '列1', prop: 'col1', showFlag: true, attrs: {} },
  { label: '列2', prop: 'col2', showFlag: true, attrs: {} }
]);
let tableSingleSelection = {};
const tableRowKey = ref('id');
const pagerRef = ref(null);
const filterRef = ref(null);
const {
  pageOptions,
  filterData,
  setPageOptions,
  filterVisible,
  deleteItemOfListView,
  setQueryMethod,
  resetListView,
  handleSearchListView,
  handleCurrentPageChange,
  handlePageSizeChange,
  handleToggleFilterOfListView
} = useListView(filterRef, false);

const handleClickDeleteItemOfListView = (data) => {
  if (isEmpty(data) || isUndefined(data)) {
    ElMessage({
      message: '请选择需要操作的数据',
      type: 'error'
    });
    return;
  }
  deleteItemOfListView({
    url: '',
    method: 'delete',
    params: { id: data.id }
  });
};
const queryTableData = async () => {
  let params = {
    url: '',
    method: 'get',
    params: {
      ...unref(filterData),
      pageIndex: pagerRef.value.pageOptions.pageIndex,
      pageSize: pagerRef.value.pageOptions.pageSize
    }
  };
  const res = await request(params);
  if (res) {
    tableData.value = res?.data?.data || [];

    const { totalCount: total = 0 } = res?.data || {};
    pagerRef.value.pageOptions.total = total;
  }
};
const handleTableRowClick = (row) => {
  unref(tableRef).clearSelection();
  unref(tableRef).toggleRowSelection(row, tableSingleSelection !== row);
};
const handleTableSingleSelect = (selection, row) => {
  unref(tableRef).clearSelection();
  selection.length && unref(tableRef).toggleRowSelection(row, true);
};
const handleTableSelectionChange = (val) => {
  tableSingleSelection = val.length ? val[0] : {};
};
const getTableSelectionData = () => {
  return tableSingleSelection;
};

onMounted(() => {
  queryTableData();
  setPageOptions(pagerRef.value.pageOptions);
  setQueryMethod(queryTableData);
});
</script>
